<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <script src="/js/plugins/dialog/dialog.min.js"></script>

    <link rel="stylesheet" type="text/css" href="/cm/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/cm/css/index.css">
    <script type="text/javascript" src="/cm/js/index.js"></script>

    <script src="/js/plugins/dialog/dialog.min.js"></script>


</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="releaseTime"></span>
            浏览 <span> 1亿+</span>
            回复 <span> 1亿+</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <img  class="rounded-circle" render-src="author.headImgUrl">
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName"></span>
                    <button class="btn" id="followBtn">关注</button><br>
                    <span>1亿+</span>篇游记
                    <span>1亿+</span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>
    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span>
                </div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-html="personName"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days"></span>
                </div>
            </div>
        </fieldset>

        <!-- 游记的内容 -->
        <div class="content" render-html="travelContent.content"></div>

    </div>

    <hr>

    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up " style="background: white" id="likeBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o" id="commentBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa fa-star-o" id="collectBtn"> </i>
        </div>
    </div>
</div>
<!-------------------------------------输入评论----------------------------------------->
<section class="tent_info">
    <div class="col-md-12 col-sm-12 col-xl-12 textarea one">
        <span render-html="">喜欢不?你想说点啥</span>
        <!--评论输入框-->
        <textarea class="text_send" id="text_send"></textarea>
        <div class="col-md-12 col-sm-12 col-xl-12 btn btn_send">提交</div>
    </div>
</section>
<!---------------------------------评论回显---------------------------------------------->
<div class="col-md-12 col-sm-12 col-xl-12 one cont usercomment" style="margin: 10%;display: none">
    <div render-loop="list">
        <div render-value="list.id">
            <div class="col-md-2 col-sm-2 col-xl-12 one img">
                <img style="width: 40px" render-src="list.user.headImgUrl">
            </div>
            <div class="col-md-10 col-sm-10 col-xl-12 one content">
                <div class="comment-right">
                    <h4 render-html="list.user.nickName"></h4>
                    <div class="comment-content-header three">
                        <span><i class="glyphicon glyphicon-time two" render-html="list.createtime"></i></span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span><i class="glyphicon glyphicon-map-marker two"></i>广州叩丁狼</span>
                    </div>
                    <p class="tent" render-html="list.content"></p>
                    <div class="comment-content-footer">
                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-xl-12 three">
                                <span><i class="glyphicon glyphicon-globe two"></i> 谷歌</span>
                            </div>
                        </div>
                    </div>
                    <!--------------回复评论---------------------------->
                    <div class="reply"   style="display: none">
                        <div render-loop="list1">
                        <div class="three">
                            <a class="replyname" render-html="list1.user.nickName"></a>:<span>@brother</span><span >back_time</span>
                        </div>
                        </div>
                    </div>
                    <!--------------回復評論------------------------------------>
                    <div class="reply-list three">

                    </div>
                    <div class="col-md-12 col-sm-12 col-xl-12 content_text one three">
                        <textarea class="col-md-10 col-sm-10 col-xl-10 con_back"></textarea>
                        <button type="button" class="btn-info" render-key="list.id" render-fun="handle" >回复</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        //文档加载完毕,拿到当前游记的id
        var user = JSON.parse(sessionStorage.getItem("user"));
        var id = getParams().id;
        if (id) {
            //有id发送ajax请求获取游记信息
            $.get("/travels/" + id, function (data) {
                //回显游记信息
                $(".travels").renderValues(data);
            });
        }


        var user = JSON.parse(sessionStorage.getItem("user"));
        //如果没有登录
        if (user == null) {
            $("#likeBtn").click(function () {
                $(document).dialog({
                    type: "notice",
                    infoText: "亲,登录了才可以点赞哦",
                    autoClose: 1500,
                    position: "center"
                });
            })
        } else {
            likeState(user.id, id);
            //点击按钮之前先加载按钮样式,看之前是否有点赞记录

            $("#likeBtn").click(function () {

                if (sessionStorage.getItem("user")) {

                    // 点击按钮之后再次发送ajax请求,判断之前是否有过点赞记录,有点赞记录,删除点赞记录,没有点赞,保存点赞记录

                    $.post("/likes/" + user.id + "/" + id, function (data) {
                        if ($(".fa-thumbs-o-up").css("color") == "rgb(255, 0, 0)") {
                            $(".fa-thumbs-o-up").css("color", "black");
                        } else {
                            $(".fa-thumbs-o-up").css("color", "red");
                        }
                    });
                    // 再次调用函数likeState();来改变点击按钮后的样式
                    //likeState(user.id,id);


                }
            });

            //查询是否有点过赞的记录
            function likeState(userId, contentId) {
                $.get("/likes/" + user.id + "/" + id, function (data) {

                    if (data) {
                        $(".fa-thumbs-o-up").css("color", "red");
                    } else {
                        $(".fa-thumbs-o-up").css("color", "");
                    }

                })

            }
        }

        /*-------------------------------------------------------*/
        //先加载当前页面的评论

        $.get("/review/" + id, function (data) {
            if (data) {
                $(".usercomment").css("display", "");
                $(".usercomment").renderValues({list: data},{
                    handle:function (ele, value) {
                        $(ele).attr("uid",value);
                    }
                })
            }
            console.log(data);
         /*   //加载评论的回复
            $.get("/reply/"+id,function (data1) {

                console.log(data1);
                if (data.id==data1.replyId) {
                   /!* $(".usercomment[value="+data1.replyId+"] .reply").css("display", "");
                    $(".usercomment[value="+data1.replyId+"] .reply").renderValues({list1: data1
                    })*!/
                    $(".reply").css("display", "");
                    $(".reply").renderValues({list1: data1})

                }
            });*/




            $(".btn-info").click(function () {
                var replyId = $(this).attr("uid");
                var contentDetail = $(this).prev(".con_back").val();
                console.log(replyId);
                console.log(contentDetail);
                //获取当前页面的评论内容,发送ajax请求,传回控制器,保存到数据库
                $.post("/reply",
                    {contentDetail: contentDetail,
                        fromUserId: user.id,
                        replyId: replyId,
                        commentId:id}, function (data){

                })
            });

        });

        if(user==null){
            $("#text_send").click(function () {
                $(document).dialog({
                    type: "notice",
                    infoText: "亲,登录了才可以评论哦",
                    autoClose: 1500,
                    position: "center"
                });
            })
        }else {

            $(".btn_send").on('click', function () {
                //获取评论信息
                var content = $("#text_send").val();
                $.post("/review", {content: content, userId: user.id, travelId: id}, function (data) {
                    $.get("/review/" + id, function (data) {
                        if (data) {
                            $(".usercomment").css("display", "");
                            $(".usercomment").renderValues({list: data},{
                                handle:function (ele, value) {
                                    $(ele).attr("uid",value);
                                }
                            });

                        }

                    });
                })


            });
        }


        //点赞默认为false
        var flag = false;
        //判断是否登陆
        if (user) {
            //登陆了就判断是否收藏
            $.get("/travelCollect/getCollectByUserId/"+user.id, {travelId: id, state: 1}, function (data) {
                if (data) {
                    $("#collectBtn").css("color", "red");
                    flag = true;
                } else {
                    $("#collectBtn").css("color", "");
                    flag = false;
                }
            })
        }
        //点击收藏
        $("#collectBtn").click(function () {
            //判断是否登陆 否就弹框
            if (user) {
                //收藏
                $.post("/travelCollect/" + user.id, {travelId: id}, function (data) {
                    if(data){
                        $("#collectBtn").css("color", "red");
                        flag = true;
                    }else {
                        $("#collectBtn").css("color", "");
                        flag = false;
                    }
                })
            }else{
                $(document).dialog({
                    type: "confirm",
                    style: "IOS",
                    titleShow: false,
                    content: "请先登录",
                });
            }
        })
    });
</script>

<div id="push"></div>
</body>
</html>